<template>
  <div class="tabs-container">
    <div class="goBack">
      <slot name="goBack"></slot>
      <slot name="newClick"></slot>
    </div>
    <el-tabs type="border-card" @tab-click="tabClick" v-model="active">
      <template v-for="(tab, index) in tabs">
        <el-tab-pane :label="tab.label" :key="index" :name="tab.value">
          <slot :name="active"></slot>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array
    },
    tabsDataColumn: {},
    tabsObj: {},
    activeName: {}
  },
  data() {
    return {
      active: "",
      istabItem: ["status", "createTime", "operate"]
    }
  },
  created() {},
  methods: {
    tabClick({ label }) {
      const tabItem = this.tabs.filter((item) => {
        if (item.label === label) return true
      })
      this.$emit("tabClick", tabItem.length && tabItem[0].value)
    }
  },

  watch: {
    activeName: {
      handler(newValue) {
        this.active = newValue
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.goBack {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
</style>
